<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 阻止它跳转 -->
        <form @submit.prevent="submit">
            账号：<input type="text" v-model.trim="userName"><br>
            密码：<input type="password" v-model="password"> <br>
            年龄：<input type="number" v-model.number="age"> <br>
            性别：男<input type="radio" name="男" v-model="sex" value="男">女<input type="radio" name="女" v-model="sex" value="女"> <br>
            爱好： 学习<input type="checkbox" v-model="hobbies" value="学习">打游戏<input type="checkbox" v-model="hobbies" value="打游戏">吃饭<input type="checkbox" v-model="hobbies" value="吃饭"> <br>
            所属校区:
            <select v-model="school">
                <option value="">请选择校区</option>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="天津">天津</option> 
            </select> <br>
            其他信息：<textarea v-model.lazy="otherMessage"></textarea> <br>
            <input type="checkbox" v-model="agree">阅读并接受<a href="#">用户协议</a> <br>
            <input type="submit" value="提交">
        </form>
    </div>
    <script>
        Vue.config.productionTip = false;
        let vm = new Vue({
            el: '#root',
            data: {
                userName:'',
                password:'',
                age:'',
                sex:'',
                hobbies:[],
                school:'',
                otherMessage:'',
                agree:true,
            },
            methods: {
                submit(){
                    console.log(JSON.stringify(this._data));
                }
            },
        });
    </script>
</body>
</html>